<!--项目责任人管理-->
<template>
  <div style="display: flex;  flex-direction: column;">
    <div style="display: flex; max-height: 30px">
      <h5 style=" font-size:12px">责任人类型</h5>
      <el-select v-model="roleId" placeholder="请选择" style="margin-top: -5px;margin-left: 10px; width: 120px">
        <el-option :key="-1" :label="'全部'" :value="-1"></el-option>
        <el-option :key="2" :label="'部门科室'" :value="2"></el-option>
        <el-option :key="5" :label="'代理机构'" :value="5"></el-option>
      </el-select>
      <h5 style="margin-left: 30px;font-size:12px;">科室/企业名称</h5>
      <el-input style="margin-top: -5px; width:130px; margin-left: 10px" placeholder="请输入" v-model="department" ></el-input>
      <el-button type="primary" style="margin-top: -5px; margin-left: 30px" icon="el-icon-search" @click="init">查询</el-button>
      <el-button type="warning" style="margin-top: -5px; margin-left: 10px" icon="el-icon-refresh" @click="reset">重置</el-button>
    </div>
    <div style="display: flex;">
      <el-table :data="tableData" style="width: 100%; margin-top: 20px" height="480">
        <el-table-column fixed label="序号"  width="50">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column fixed prop="userId" label="科室/企业编号" width="100"></el-table-column>
        <el-table-column prop="department" label="科室/企业名称" width="100"></el-table-column>
        <el-table-column label="责任人类型" width="80">
          <template slot-scope="scope">
            <!-- 根据 roleId 的值进行不同内容显示 -->
            <span v-if="scope.row.roleId === 2">部门科室</span>
            <span v-else-if="scope.row.roleId === 5">代理机构</span>
            <span v-else>其他</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="联系人" width="80"></el-table-column>
        <el-table-column prop="phoneNumber" label="联系电话" width="120"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="120"></el-table-column>
        <el-table-column prop="address" label="地址" width="150"></el-table-column>
        <el-table-column prop="intro" label="简介" width="180"></el-table-column>
        <el-table-column label="数据来源" width="80">
          <template slot-scope="scope">
            <!-- 根据 roleId 的值进行不同内容显示 -->
            <span v-if="scope.row.roleId === 2">后台维护</span>
            <span v-else-if="scope.row.roleId === 5">用户申请</span>
            <span v-else>其他</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="80">
          <template slot-scope="scope">
            <el-switch
                v-model="scope.row.status"
                @change="handleStatusChange(scope.row)"
                :active-value="1"
                :inactive-value="0">

            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160">
          <template slot-scope="scope">
            <el-button type="success" @click="handleLook(scope.row)">查看</el-button>
            <el-button type="primary" @click="handleDel(scope.row.userId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div style="padding: 10px 0;margin-left: 800px">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
<!--    查看-->
    <el-dialog title="查看"
               :visible.sync="dialogLookVisible"
               :custom-class="'slide-right-dialog'"
    >
      <el-form :model="lookForm" label-width="140px" class="demo-ruleForm">
        <el-form-item label="用户名">
          <el-input v-model="lookForm.username" readonly></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="lookForm.name" readonly></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="lookForm.phoneNumber" readonly></el-input>
        </el-form-item>
        <el-form-item label="角色">
          <el-radio-group v-model="lookForm.roleId" disabled>
            <el-tag v-if="lookForm.roleId === 2">部门科室</el-tag>
            <el-tag v-else-if="lookForm.roleId === 5">代理机构</el-tag>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="头像">
          <img v-if="lookForm.avatar" :src="lookForm.avatar" class="avatar">
          <i v-else>暂无</i>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="lookForm.email" readonly></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="lookForm.address" readonly></el-input>
        </el-form-item>
        <el-form-item label="所属科室/企业" prop="tenderOfficer">
          <el-input v-model="lookForm.department" readonly></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogLookVisible = false">关闭</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>

</template>
<script>
import {addUser, deleteuser, getUserByRoleId, getUserPage} from "@/api/user";

export default {
  data() {
    return {
      roleId: -1,
      department: '',
      pageNum: 1,
      total: 0,
      pageSize: 10,
      procurementMethod: '',
      departmentNumber: '',
      departmentName: '',
      value1: '',
      tableData: [],
      lookForm: {},
      dialogLookVisible: false,
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      getUserPage(this.pageNum, this.pageSize, this.roleId,this.department).then(res => {
        this.tableData = res.records;
        this.total = res.total;
      })
    },
    handleStatusChange(row){
      addUser(row).then(res => {
        if(res) {
          this.$message.success('操作成功')
        } else {
          this.$message.error('操作失败')
        }
      })
    },
    handleSizeChange(val) {//改变页码
      this.pageSize = val;
      this.init();
    },
    handleCurrentChange(val) {//改变每页显示条数
      this.pageNum = val;
      this.init();
    },
    handleLook(row) { //查看
      this.lookForm = row
      this.dialogLookVisible = true
    },
    handleDel(id) { //删除
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteuser(id).then(res => {
          if(res) {
            this.$message.success('删除成功')
            this.init()
          } else {
            this.$message.error('删除失败')
          }
       })
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    reset() { //重置搜索框
      this.roleId = -1;
      this.department = '';
      this.init();
    },
  }
}
</script>
<style scoped>
>>> .slide-right-dialog {
  top: -115px;
  right: 0;
  margin: 0;
  position: absolute;
  height: 1000px;
  width: 600px;
  animation: slide-right 0.3s ease;
}
>>> .slide-right-dialog .el-dialog__title {
  font-size: 14px; /* 调整对话框正文内容的字体大小 */
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 32px;
  color: #8c939d;
  width: 188px;
  height: 188px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 70px;
  height: 70px;
  display: block;
}
</style>